<template>
  <div class="app-container">
      <div class="header">
         <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item prop="status" class="with-160">
               <!-- <el-tree-select
                  v-model="queryParams.serviceId"
                  :data="deptTreeData"
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  :render-after-expand="false"
                  show-checkbox
                  value-key="id"
                  check-strictly
                  placeholder="请选择服务区"
                  class="with-240"
               /> -->
               <el-select
                  v-model="queryParams.serviceId"
                  placeholder="请选择服务区"
                  clearable
               >
                  <el-option
                     v-for="item in deptListData"
                     :key="item.id"
                     :label="item.label"
                     :value="item.id"
                  />
               </el-select>
            </el-form-item>
            <el-form-item class="with-220">
               <el-date-picker
                  v-model="dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabled-date="disabledDate"
                  @change="handleChangeDate"
               ></el-date-picker>
            </el-form-item>

            <el-form-item prop="carTypeCode">
               <el-select
                  v-model="queryParams.carTypeCode"
                  placeholder="请选择车型"
                  clearable
                  class="with-150"
               >
                  <el-option
                     v-for="item in car_type"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                  />
               </el-select>
            </el-form-item>

            <el-form-item prop="carBrandCode">
               <el-select
                  v-model="queryParams.carBrandCode"
                  placeholder="请选择品牌"
                  clearable
                  class="with-150"
               >
                  <el-option
                     v-for="itme in car_brand"
                     :key="itme.value"
                     :label="itme.label"
                     :value="itme.value"
                  />
               </el-select>
            </el-form-item>

            <el-form-item prop="provinceCode">
               <el-select
                  v-model="queryParams.provinceCode"
                  placeholder="请选择省市"
                  clearable
                  class="with-160"
               >
                  <el-option
                     v-for="item in provinces"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                  />
               </el-select>
            </el-form-item>

            <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
         </el-form>

         <div>
            <el-button
            type="primary"
            plain
            @click="handleSelect('chart')"
            :class="isShowChart ? 'is-active' : ''"
            >图表显示</el-button>
            <el-button
               type="primary"
               plain
               @click="handleSelect('table')"
               :class="!isShowChart ? 'is-active' : ''"
            >表格显示</el-button>
            <!-- <el-button
                  plain
                  icon="Download"
                  @click="handleExport"
            >下载</el-button> -->
         </div>
      </div>
      
      <div class="echarts-wrap" v-if='isShowChart'>
         <traffic :statisticData="carFlowStatistic"></traffic>
         <province :statisticData="provinceStatistic"></province>
         <brand :statisticData="carBrandStatistic"></brand>
         <grade :statisticData="carLevelStatistic"></grade>
         <duration :statisticData="stayHourStatistic"></duration>
         <car-model :statisticData="carTypeStatistic"></car-model>
      </div>
      <traffic-table :queryParams="queryParams" ref='trafficRef' v-else></traffic-table>
  </div>
</template>

<script setup>
import { trafficStatistic } from '@/api/bigData/traffic'
import { toTeamTimeSep } from '@/utils/util'
import traffic from "./components/traffic.vue";
import brand from "./components/brand.vue";
import province from "./components/province.vue";
import grade from "./components/grade.vue";
import duration from "./components/duration.vue";
import carModel from "./components/carModel.vue";
import trafficTable from "./components/table.vue";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const dateRange = ref([]);
const trafficRef = ref();
const queryParams = reactive({
    serviceId:"",
    visitDateStart:null,
    visitDateEnd:null,
    provinceCode: null,
    carBrandCode: null,
    carTypeCode: null
});
const carBrandStatistic = ref([]);
const carFlowStatistic = ref([]);
const carLevelStatistic = ref([]);
const carTypeStatistic = ref([]);
const provinceStatistic = ref([]);
const stayHourStatistic = ref([]);
const isShowChart = ref(true)
const { car_type,car_brand,provinces} = proxy.useDict("car_type","car_brand","provinces");
const handleChangeDate = (item) => {
  if (item) {
    queryParams.visitDateStart = item[0];
    queryParams.visitDateEnd = item[1];
  } else {
    queryParams.visitDateStart = "";
    queryParams.visitDateEnd = "";
  }
}

const deptListData = computed(()=>{
   const list  = useUserStore().deptListData;
   return list.filter(ele => ele?.deptType == "1").map(ele => {
      return {
         id: ele.deptId,
         label: ele.deptName,
      }
   })
})

const disabledDate = (time) =>{
   return time.getTime() > Date.now();
}

const resetQuery = ()=> {
   setDefaultDate()
   proxy.resetForm("queryRef");
   handleQuery();
}

const handleQuery = ()=>{
   if(isShowChart.value){
      getList();
   }
   else{
      trafficRef.value.getList()
   }
}

const getList = ()=>{
  proxy.$modal.loading("正在加载服务监控数据，请稍候！");
  trafficStatistic(queryParams).then(response => {
      const data = response.data || {};
      carBrandStatistic.value = data?.carBrandStatistic || [];
      carFlowStatistic.value = data?.carFlowStatistic || [];
      carLevelStatistic.value = data?.carLevelStatistic || [];
      carTypeStatistic.value = data?.carTypeStatistic || [];
      provinceStatistic.value = data?.provinceStatistic || [];
      stayHourStatistic.value = data?.stayHourStatistic || [];
      proxy.$modal.closeLoading();
      proxy.$modal.closeLoading();
   }).catch(() => {
      proxy.$modal.closeLoading();
   });
}

const handleSelect = (type) => {
   isShowChart.value = type === "chart" ? true : false;
   if(type === "chart") {
      getList()
   }
}

const setDefaultDate = () =>{
   dateRange.value = toTeamTimeSep(7);
   queryParams.visitDateStart = dateRange.value[0];
   queryParams.visitDateEnd = dateRange.value[1];
   queryParams.serviceId  = deptListData.value[0]?.id;
}

const handleExport = () =>{
  proxy.download("system/dict/data/export", {
    ...queryParams.value
  }, `dict_data_${new Date().getTime()}.xlsx`);
}
setDefaultDate();
getList();
</script>
<style lang="scss" scoped>
  .app-container{
   .header{
      display: flex;
      justify-content: space-between;
      .el-form{
         flex:1
      }
   }
   .echarts-wrap{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
   }
   .is-active{
      background-color: var(--el-button-active-bg-color);
   }
   .el-button:active{
      background: var(--el-color-primary-light-9);
   }
  }
  
</style>
